import React, { Component } from 'react';
import categoryStyle from './category.module.scss';
import style from '../index.module.scss';
import {connect} from 'react-redux';
import * as imgActions from '@/store/actions/img';
import {bindActionCreators} from 'redux';
import BlockImage from '@/components/blockImage';
import debounce from '@/utils/util';


class Categery  extends Component {
    render() {
        let {categoryList,Count} = this.props;
        return (
            <div className={categoryStyle['category-wrap']} ref="scrollBox">
                <section className={style['type']} ref="content">
                    {categoryList.length && categoryList.map((item,index) => <BlockImage index={index} key={index} imgUrl={item.Url}></BlockImage>)}
                </section>
            </div>
        )
    }

    componentDidMount(){
        //获取对应分类的图片
        this.refs.scrollBox.addEventListener('scroll',this.loadFun);
        //外层盒子的高度
        this.clientHeight = this.refs.scrollBox.clientHeight;
    }

    loadFun = debounce(() =>{
        if(this.props.page < Math.ceil(this.props.Count/this.props.pageSize)){
            let contentHeight = this.refs.content.offsetHeight;  //内容的高度
            //盒子的高度+滚动的高度 > 内容高度-20
            if((this.clientHeight + this.refs.scrollBox.scrollTop) > (contentHeight-20)){
                this.props.getData();
            }
        }else{
            console.log("====")
        }
    },1000)

    componentWillUnmount() {
        this.refs.scrollBox.removeEventListener('scroll',this.loadFun);
    }   
}


const stateMapToProps = (state) => {
    return {
        categoryList:state.img.categoryList,
        Count:state.img.Count
    }
}

const dispatchMapToProps = (dispatch) => {
    return bindActionCreators(imgActions,dispatch)
}

export default connect(stateMapToProps,dispatchMapToProps)(Categery)